<template>
    <link :href="`./highlight.js/styles/${codeTheme}.css`" type="text/css" rel="stylesheet">
    <link :href="`./article/${articleTheme}.css`" type="text/css" rel="stylesheet">
    <div class="app">
        <a-spin :loading="loading" :tip="loadingText" class="rain-loading">
            <a-layout>
                <a-layout-sider collapsed style="z-index: 50">
                    <a-menu style="width: 200px;height: 100%;" breakpoint="xl" v-model:selected-keys="selectedKeys">
                        <a-menu-item key="/home">
                            <template #icon>
                                <icon-home/>
                            </template>
                            主页
                        </a-menu-item>
                        <a-menu-item key="/zone">
                            <template #icon>
                                <icon-qq-zone/>
                            </template>
                            空间
                        </a-menu-item>
                        <!--                        <a-menu-item key="/html">-->
                        <!--                            <template #icon>-->
                        <!--                                <icon-file />-->
                        <!--                            </template>-->
                        <!--                            离线网页-->
                        <!--                        </a-menu-item>-->
                        <a-menu-item key="/timeline">
                            <template #icon>
                                <icon-time-line/>
                            </template>
                            时间线
                        </a-menu-item>
                        <a-menu-item key="/graph">
                            <template #icon>
                                <icon-mind-mapping/>
                            </template>
                            图
                        </a-menu-item>
                        <a-sub-menu key="/setting">
                            <template #icon>
                                <icon-settings/>
                            </template>
                            <template #title>设置</template>
                            <a-menu-item key="/setting/base">
                                基础设置
                            </a-menu-item>
                            <a-menu-item key="/setting/category">
                                分类设置
                            </a-menu-item>
                            <a-menu-item key="/setting/backup">
                                备份设置
                            </a-menu-item>
                            <a-menu-item key="/setting/feature">
                                关键字设置
                            </a-menu-item>
                        </a-sub-menu>
                        <a-sub-menu key="/more">
                            <template #icon>
                                <icon-more/>
                            </template>
                            <template #title>更多</template>
                            <a-menu-item key="/more/attachment">
                                <template #icon>
                                    <icon-attachment/>
                                </template>
                                附件
                            </a-menu-item>
                            <a-menu-item key="/more/recommend">
                                <template #icon>
                                    <icon-thumb-up/>
                                </template>
                                推荐
                            </a-menu-item>
                            <a-menu-item key="/more/about">
                                <template #icon>
                                    <icon-exclamation-circle/>
                                </template>
                                关于
                            </a-menu-item>
                        </a-sub-menu>
                    </a-menu>
                </a-layout-sider>
                <a-layout-content>
                    <router-view v-if="show"/>
                </a-layout-content>
            </a-layout>
        </a-spin>
        <markdown-import/>
        <a-image-preview v-model:visible="preview.visible" :src="preview.src"/>
    </div>
</template>
<script lang="ts">
import {mapState} from "pinia";
import {defineComponent,} from "vue";
import {statistics, useImportEvent} from "@/global/BeanFactory";
// 存储
import {useZoneStore} from "@/store/db/ZoneStore";
import {useGlobalStore} from "@/store/GlobalStore";
import {useBaseSettingStore} from "@/store/db/BaseSettingStore";
import {useArticleStore} from "@/store/db/ArticleStore";
import {useCategoryStore} from "@/store/db/CategoryStore";
// 组件
import IconTimeLine from "@/icon/IconTimeLine.vue";
import MarkdownImport from '@/components/MarkdownImport/index.vue';
import {ArticleIndex} from "@/entity/article";
import updateCheck from "@/components/UpdateCheck";
import {useBackupSettingStore} from "@/store/db/BackupSettingStore";
import MessageUtil from "@/utils/MessageUtil";

export default defineComponent({
    name: 'app',
    components: {IconTimeLine, MarkdownImport},
    data: () => ({
        selectedKeys: ['/dashboard'],
        preview: {
            visible: false,
            src: ''
        },
        show: true
    }),
    computed: {
        ...mapState(useGlobalStore, ['isDark', 'loading', 'loadingText']),
        ...mapState(useBaseSettingStore, ['codeTheme', "articleTheme"]),
    },
    watch: {
        '$route': {
            handler(newValue) {
                const path = newValue.path as string;
                const name = newValue.name as string;
                if (path !== this.selectedKeys[0]) {
                    this.selectedKeys[0] = path;
                }
                statistics.access(name);
            }
        },
        selectedKeys(newValue) {
            this.$router.push(newValue[0]);
        }
    },
    created() {
        // 插件进入
        utools.onPluginEnter(action => {
            const code = action.code as string;
            const items = code.split(":");
            if (items.length == 2) {
                this.onPluginEnter(items[0], items[1], action.payload)
            }
        })
        // 主题
        this.theme();
        this.selectedKeys = [this.$route.path];
        // 初始化数据
        this.init();
        // 全局事件
        window.onImagePreview = (src) => {
            this.preview = {
                visible: true,
                src
            }
        }
        // 适配新版，快速启动
        utools.onMainPush(action => {
            if (action.code !== "function:search") {
                return [];
            }
            // 快速启动
            const storages = new Array<ArticleIndex>();
            for (let storage of useArticleStore().articles) {
                if (storage.name.indexOf(action.payload) > -1) {
                    storages.push(storage);
                }
            }
            return storages.map(e => ({
                icon: 'public/logo.png',
                text: e.name,
                title: e.id + ''
            }))
        }, action => {
            if (this.$route.path.startsWith("/article")) {
                this.show = false;
            }
            this.$router.push('/article/' + action.option.title).finally(() => this.show = true);
            return true;
        });
        // 检测更新
        updateCheck();
    },
    methods: {
        theme() {
            if (this.isDark) {
                // 设置为暗黑主题
                document.body.setAttribute('arco-theme', 'dark');
            } else {
                // 恢复亮色主题
                document.body.removeAttribute('arco-theme');
            }
        },
        init() {
            useZoneStore().init();
            useBaseSettingStore().init();
            useArticleStore().init();
            useCategoryStore().init();
            useBackupSettingStore().init();
        },
        onPluginEnter(operate: string, preload: string, extra: string) {
            if (operate === 'article') {
                this.$router.push('/article/' + preload);
            } else if (operate === 'function') {
                if (preload === 'import') {
                    useImportEvent.emit(extra);
                } else if (preload === 'application') {
                    this.$router.push('/home');
                } else if (preload === 'add') {
                    sessionStorage.setItem("extra", extra);
                    this.$router.push('/editor/0')
                } else if (preload === 'add-zone') {
                    useZoneStore().addSimple(extra)
                        .then(() => {
                            // 隐藏插件
                            utools.hideMainWindow();
                            utools.outPlugin();
                            // 显示提示
                            utools.showNotification("新增动态成功");
                        })
                        .catch(e => MessageUtil.error("新增动态失败", e));
                }
            }
        }
    }
});
</script>
<style lang="less"></style>
